<script setup lang="ts">
import {defineProps, computed} from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})

const iconSrc = computed(() => {
  const icons = import.meta.glob('@/assets/svg/*.svg', {eager: true, as: 'url'})
  const iconPath = `/src/assets/svg/${props.name}.svg`
  return icons[iconPath] || ''
})
</script>

<template>
  <img v-if="iconSrc" :src="iconSrc" :alt="name" class="icon"/>
  <span v-else>图标未找到</span>
</template>

<style scoped>
.icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
</style>